<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">
        <div class="main-container" >
            <p:tabMenu id="tab1" model="#{dynamicMenu.getSimpleMenuModel(1)}" style="width: 90%"  />

            <h:form id="form" style="width: 90%" >  
                <p:panel style="border-bottom: none; width: 90%" >  

                    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" /> 
                    <h:panelGrid columns="8"  style="border-bottom-width: 0px; border-spacing: 0px; ">  

                        <h:outputText value="SKU :" />  
                        <p:inputText id="skuFilter" value="#{orderBean.sku}" style="width:150px; height: 25px; margin-right: 30px" >
                        </p:inputText> 
                        <h:outputText value="Product :" />                
                        <p:selectOneMenu value="#{orderBean.classBean.param}" id="product" style="width: 150px; margin-right: 20px;">
                            <f:selectItem itemLabel="Select Product" itemValue=""  />
                            <f:selectItems value="#{orderBean.lineBean.lines}" var="line"
                                           itemLabel="#{line.description}" itemValue="#{line.inLinePK.idLine}"/>
                            <p:ajax update="type" listener="#{orderBean.classBean.handleClassChange('InClass.findByIdLine', 'idLine')}" ></p:ajax> 
                        </p:selectOneMenu>

                        <h:outputText value="Type :" />  
                        <p:selectOneMenu value="#{classBean.param}" id="type" style="width: 150px; margin-right: 20px;" >
                            <f:selectItem itemLabel="Select Type" itemValue="" />
                            <f:selectItems value="#{classBean.classes}" var="class"
                                           itemLabel="#{class.description}" itemValue="#{class.description}"/>
                            <p:ajax update="ride" listener="#{classBean.handleClassChangeDes('InClass.findByDescription', 'description')}" ></p:ajax> 
                        </p:selectOneMenu>

                        <h:outputText value="Ride :" />  
                        <p:selectOneMenu value="#{classBean.descParam2}" id="ride" style="width: 150px; margin-right: 20px;" >
                            <f:selectItem itemLabel="Select Ride" itemValue="" />
                            <f:selectItems value="#{classBean.classesDesc}" var="class2"
                                           itemLabel="#{class2.description2}" itemValue="#{class2.description2}"/>
                        </p:selectOneMenu>

                    </h:panelGrid>  


                    <h:panelGrid columns="5" cellpadding="5" style="border-bottom-width: 30px">  
                        <p:commandButton  value="Filter" icon="filter" action="#{orderBean.filterCriteria()}" update="dataTable" ></p:commandButton> 
                        <p:commandButton  value="PDF" icon="pdf" onclick="PrimeFaces.monitorDownload(start, stop);"> 
                            <p:fileDownload value="#{orderBean.generateReport()}"/>  
                        </p:commandButton>
                        <p:commandButton  value="Excel" icon="excel"> </p:commandButton>
                        <p:commandButton value=" Place Order " action="#{orderBean.createDetailOrders()}" style="color: #0072C6;" ajax="false"> </p:commandButton>
                    </h:panelGrid>

                </p:panel>

                <p:dataTable id="dataTable" var="inventory" value="#{orderBean.inventories}" widgetVar="inventoryTable" paginator="true"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                             {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginatorPosition="bottom" editable="true" editMode="cell"
                             rows="10" rowsPerPageTemplate="10,20,40" style="width: 90%"
                             > 
                    <p:column >  
                        <f:facet name="header">  
                            GI SKU 
                        </f:facet>  

                        <h:outputText value="#{inventory.sku}" />  

                    </p:column> 
                    <p:column headerText="Picture" >  

                        <h:outputLink value="#{inventory.catalog.link}" target="_blank">
                            <img src="#{request.contextPath}/resources/img/icons/#{inventory.classDesc}.jpg"   style="float: center;"/>
                        </h:outputLink>
                    </p:column>

                    <p:column headerText="Model Name">  
                        <h:outputText value="#{inventory.modelName}" style="float: left"/>  
                    </p:column> 
                    <p:column headerText="Model Year">  
                        <h:outputText value="#{inventory.modelYear}" />  
                    </p:column> 

                    <p:column headerText="Size" >  
                        <h:outputText value="#{inventory.sizeDesc}" />  
                    </p:column>  
                    
                    <p:column headerText="Color" >  
                        <h:outputText value="#{inventory.colorDesc}" />  
                    </p:column> 

                    <p:column headerText="Price ($)">  
                        <h:outputText value="#{inventory.grossPrice}" style="text-align: center" >
                            <f:convertNumber type="currency"  currencySymbol="" pattern="###,###" />
                        </h:outputText>  
                    </p:column> 

                    <p:column headerText="Available">  
                        <h:outputText value="#{inventory.isAvailable}" />  
                    </p:column>  

                    <p:column headerText="Order Quantity" >  
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{inventory.orderQuantity}" />
                            </f:facet>
                            <f:facet name="input">
                                <h:inputText value="#{inventory.orderQuantity}">
                                    <p:ajax event="change" update="dataTable"   listener="#{orderBean.addTempDetailOrder(inventory)}"/>  
                                </h:inputText>
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <f:facet name="footer">  
                        In total there are #{orderBean.inventories.size()} Items.  
                    </f:facet>  

                </p:dataTable> 


            </h:form>  
            <script type="text/javascript">
                            function start() {
                                statusDialog.show();
                            }

                            function stop() {
                                statusDialog.hide();
                            }
            </script>
        </div>      
    </ui:define>
</ui:composition>

